import { Auths, Role } from '@/utils/types.d';
import { ProFormSelect } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { useState } from 'react';
import { useModel } from 'umi';
import { queryCompanies } from '../SystemUser/service';
import ColorConfigPages from './ColorConfig';
import TicketConfigPages from './TicketConfig';

const UserConfigPages = () => {
  const [tab, setTab] = useState<string>('color');
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const isAdmin = currUser?.role === Role.ADMIN;
  const [ownerId, setOwnerId] = useState<string>(isAdmin ? '' : currUser?.ownerId || '');
  const auths = currUser?.auth ? new Set(currUser.auth.systemConfig || []) : new Set();
  const ifCreate = auths.has(Auths.PDA_CONFIG);
  return (
    <PageContainer
      header={{
        breadcrumb: {
          routes: [
            {
              path: '/',
              breadcrumbName: '首页',
            },
            {
              path: '/setting-config',
              breadcrumbName: '系统配置',
            },
            {
              path: '/pda',
              breadcrumbName: '收费终端配置',
            },
          ],
        },
        subTitle: '收费终端配置',
      }}
      tabList={[
        {
          tab: '泊位颜色配置',
          key: 'color',
        },
        {
          tab: '小票配置',
          key: 'ticket',
        },
      ]}
      extra={
        isAdmin && (
          <ProFormSelect
            name="ownerId"
            label="配置公司"
            debounceTime={300}
            showSearch
            fieldProps={{
              value: ownerId,
              onChange: (val) => setOwnerId(val),
              style: {
                width: 280,
                margin: 0,
              },
            }}
            placeholder="请选择要进行配置公司"
            request={(val) => queryCompanies(val.keyWords)}
          />
        )
      }
      tabActiveKey={tab}
      onTabChange={(key) => setTab(key)}
    >
      {tab === 'color' && <ColorConfigPages ifConfig={ifCreate} ownerId={ownerId} />}
      {tab === 'ticket' && <TicketConfigPages ifConfig={ifCreate} ownerId={ownerId} />}
    </PageContainer>
  );
};

export default UserConfigPages;
